<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" id="vp" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>通知</title>
		<link rel="stylesheet" type="text/css" href="../../../css/style.css">
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<style>
		</style>
	</head>

	<body>

	<div id="list">
			<div class="notice-main mmt20">
				<ul> 
					<li id="noticedetail" v-for="item in items" @tap="open_detail(item)">
						<div class="notice-wrap posir">
							<div class="title z">{{item.title}}</div>
							<div class="time fl">{{item.time}}</div>
							<div class="text fr">{{item.member_name}}</div>
							<div class="clear"></div>
						</div>
					</li>		
				</ul>
			</div>
		</div>

		
		<script src="../../../js/jquery-1.8.3.min.js"></script>
		<script src="../../../js/mui.js"></script>
		<script src="../../../js/vue.min.js"></script>
		<script src="../../../js/app.js"></script>
		<script src="../../../js/token.js"></script>
		<script>
			
			var firstid = ''; //最旧的msg id，用于上拉加载
			var lastid = ''; //最新的msg id，用于下拉刷新
			var state = app.getState();
			var memberToken = state.memberToken;
			mui.init({
				pullRefresh: {
					container: '#list',
					down: {
						style: 'circle',
						offset: '0px',
						auto: true,
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			
				
				
				
			mui.plusReady(function() {
			
			});
			//下拉刷新
			function pulldownRefresh() {
				if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
					plus.nativeUI.toast('似乎已断开与互联网的连接', {
						verticalAlign: 'top'
					});
					return;
				}
				var data = {
					uid: state.userid,
					type:'1',
					memberToken: memberToken
				};
				if(lastid) { //说明已有数据，目前处于下拉刷新，增加时间戳，触发服务端立即刷新，返回最新数据
					data.lastid = lastid;
				}
				mui.post(Apiurl+'index/notice', data, function(data) {
					mui('#list').pullRefresh().endPulldownToRefresh();
					if(data && data.length > 0) {
						lastid = data[0].id;
						if(!firstid) { //首次拉取列表时保存最后一条消息的id，方便上拉加载时使用
							firstid = data[data.length - 1].id;
						}
						list.items = data.concat(list.items);
					}
				}, 'json');
			}
			//上拉加载
			function pullupRefresh() {
				if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
					plus.nativeUI.toast('似乎已断开与互联网的连接', {
						verticalAlign: 'top'
					});
					return;
				}
				var data = {
					uid: state.userid,
					type:'1',
					memberToken: memberToken
				};
				if(firstid) { //说明已有数据，目前处于上拉加载，传递当前Id 返回历史数据
					data.firstid = firstid;
				}
				//请求历史列表信息流
				mui.post(Apiurl+'index/notice', data, function(data) {
					mui('#list').pullRefresh().endPullupToRefresh();
					if(data && data.length > 0) {
						firstid = data[data.length - 1].id; //保存最后一条消息的id，上拉加载时使用
						list.items = list.items.concat(data);
					}
				}, 'json');
			}
			var list = new Vue({
				el: '#list',
				data: {
					items: [] //列表信息流数据
				},
				methods: {
					open_detail: function(item) {
						mui.openWindow({
							url: 'notice_detail.html',
							id: 'noticedetail',
							styles: {
								"render": "always",
								"popGesture": "hide",
								"bounce": "vertical",
								"bounceBackground": "#efeff4",
								"titleNView": titleNView = { //详情页原生导航配置
									autoBackButton: true, //自动绘制返回箭头
									backgroundColor: '#25aae3', //导航栏背景色
									titleText: "详细信息", //导航栏标题
									titleColor: '#F7F7F7', //文字颜色
									//coverage:"120px",
									//type: 'transparent', //透明渐变样式
									splitLine: { //底部分割线
										color: '#cccccc'
									}
								}
							},
							extras: {
								noticeid: item.id,
								userid: state.userid
							}
						});
					}
				}
			});
			
		</script>
	</body>

</html>